@extends('admin.layout.app')
@section('title', '编辑菜单')

@section('nav')
    @include('admin.layout.nav', ['title'=> ['系统管理','编辑菜单']])
@endsection

@section('content')
    <div class="box box-primary" style="min-height: 300px;">
        <div class="box-header with-border">
            <h3 class="box-title">编辑菜单</h3>
        </div>
        <!-- /.box-header -->
        <form action="/menus/update" method="post" id="add-form" autocomplete="off">
            {{ csrf_field() }}
            <input name="id" value="{{$sidebar->id}}" style="display: none;"/>
            <div class="box-body">
                <div class="form-group">
                    <label for="name">父级菜单：</label>
                    <select class="form-control parent-select" name="pid">
                        <option value="0">顶级菜单</option>
                        @component('admin.component.sidebar-option', ['sidebars' => $sidebars, 'count'=>1])

                        @endcomponent
                    </select>
                </div>
                <div class="form-group">
                    <label for="name">菜单名：</label>
                    <input type="text" class="form-control" name="name" value="{{$sidebar->name}}" placeholder="请输入">
                </div>
                <div class="form-group">
                    <label for="url">url：</label>
                    <input type="text" class="form-control" name="url" value="{{$sidebar->url}}"  placeholder="请输入">
                </div>
                <div class="form-group">
                    <label for="sort">排序值：</label>
                    <input type="text" class="form-control" name="sort" value="{{$sidebar->sort}}"  placeholder="请输入">
                </div>
                <div class="form-group">
                    <label for="icon">icon：</label>
                    <div class="input-group iconpicker-container">
                                <span class="input-group-btn">
                                    <button class="btn btn-default icon-btn-my" data-icon="{{$sidebar->icon}}" data-iconset="fontawesome" role="iconpicker"></button>
                                </span>
                        <input type="text" name="icon" id="icon" class="form-control icon iconpicker-element iconpicker-input" value="{{$sidebar->icon}}">
                    </div>
                    <span class="help-block">
                        <i class="fa fa-info-circle"></i>&nbsp;For more icons please see <a href="http://fontawesome.io/icons/" target="_blank">http://fontawesome.io/icons/</a>
                    </span>
                </div>
                <div class="form-group">
                    <label for="assign-roles[]">角色：</label>
                    <select multiple="multiple" name="assign-roles[]" id="assign-roles" class="form-control select2" style="width: 100%;">
                        @foreach($roles as $role)
                            <option value="{{$role->id}}" @if($role->selectd) selected @endif>{{$role->display_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <!-- /.box-body -->

            <div class="box-footer">
                <input type="submit" class="btn btn-primary" value="提交">
                <a class="btn btn-default pull-right" href="javascript:window.history.back();">返回</a>
            </div>
        </form>

    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="/lib/jquery.validation/1.14.0/validation.css">
    <link rel="stylesheet" href="/AdminLTE-2.4.2/bower_components/select2/select2.min.css">
    <link rel="stylesheet" href="/AdminLTE-2.4.2/bower_components/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css">
    <style>

    </style>
@endsection

@section('js')
    <script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/select2/select2.full.min.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/bootstrap-iconpicker/js/bootstrap-iconpicker-iconset-all.min.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>
    <script >
        $(function(){
            $('.parent-select').select2({
                allowClear: true,
                placeholder: "父级菜单"
            });
            $('#assign-roles').select2({
                allowClear: true,
                placeholder: "角色"
            });
            $('.icon-btn-my').iconpicker({placement:'bottomLeft'});

            $('.icon-btn-my').on('change', function(e) {
                $('.icon').val(e.icon);
                console.log(e.icon);
            });

            $("#add-form").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2
                    },
                    icon: {
                        required: true,
                    },
                    pid:{
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: "请输入菜单名",
                        minlength: "至少由两个字母组成",
                    },
                    icon: {
                        required: "请选择",
                    },
                    pid: {
                        required: "请选择",
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
                }
            })
        })
    </script>
@endsection